<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="测试平台" name="first">
        <template slot="header"></template>
        <el-form ref="loginDevForm" :model="devLogin" :rules="loginRules" class="login-form">
          <el-form-item prop="username">
            <el-input v-model="devLogin.username" type="text" auto-complete="off" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="devLogin.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              @keyup.enter.native="handleDevLogin"
            ></el-input>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="width:100%;"
              @click.native.prevent="handleDevLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="正式平台" name="second">
        <template slot="header"></template>
        <el-form ref="loginProdForm" :model="prodLogin" :rules="loginRules" class="login-form">
          <el-form-item prop="username">
            <el-input v-model="prodLogin.username" type="text" auto-complete="off" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="prodLogin.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              @keyup.enter.native="handleProdLogin"
            ></el-input>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="width:100%;"
              @click.native.prevent="handleProdLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { Notification } from "element-ui";
import G6Api from "@/api/g6/g6Api";

export default {
  name: "ptLogin",
  data() {
    return {
      activeName: "first",
      loading: false,
      devLogin: {
        username: "feidie",
        password: "wz666666_"
      },
      prodLogin: {
        username: "",
        password: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空" }
        ],
        password: [{ required: true, trigger: "blur", message: "密码不能为空" }]
      }
    };
  },
  computed: {
    isLogin() {
      return false;
    }
  },
  methods: {
    handleDevLogin() {
      this.$refs.loginDevForm.validate(valid => {
        if (valid) {
          this.loading = true;
          G6Api.ptLogin(this.devLogin)
            .then((data) => {
              Notification({
                message: "登陆成功",
                type: "success",
                duration: 5 * 1000
              });
              localStorage.setItem('g6Token', data.data.token)
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    handleProdLogin() {
      this.$refs.loginProdForm.validate(valid => {
        if (valid) {
          // 不做实现
        }
      });
    }
  }
};
</script>
